<template>
	<view>
		<view class="nav" v-if="type == 1">
			<view class="nav_nr" :class="nav_id == 2 ? 'nav_nr_xz' : ''" @click="navclick(2)">
				未使用({{ count.not_use }})
			</view>
			<view class="nav_nr" :class="nav_id == 1 ? 'nav_nr_xz' : ''" @click="navclick(1)">已使用({{ count.used }})</view>
			<view class="nav_nr" :class="nav_id == 3 ? 'nav_nr_xz' : ''" @click="navclick(3)">
				已过期({{ count.out_time }})
			</view>
		</view>
		<view class="con" v-if="type == 1">
			<view :class="`list list_${nav_id}`" v-for="(item, index) in list" :key="index">
				<view class="list_top">
					<view class="list_top_left">
						<view class="list_top_left_title">{{ item.title }}</view>
						<view class="list_top_left_text">满{{ item.virtual_price }}元可用</view>
					</view>
					<view class="list_top_right">
						{{ item.actual_price }}
						<span class="span">元</span>
					</view>
				</view>
				<view class="list_btn">
					<view class="list_btn_zw zw1"></view>
					<view class="list_btn_zw zw2"></view>
					<view class="list_btn_left">有效期至{{ item.end_time }}</view>
					<view class="list_btn_right" v-if="nav_id == 2" @click="to_index">
						去使用
						<image class="list_btn_right_img" src="/static/63.png" mode=""></image>
					</view>
					<view class="list_btn_right" v-if="nav_id == 1">已使用</view>
					<view class="list_btn_right" v-if="nav_id == 3">已过期</view>
				</view>
			</view>
		</view>

		<view class="con" v-if="type == 2">
			<!-- 	<view class="nav nav2" v-if="type == 2">
				<view class="nav_nr" :class="nav_id == 2 ? 'nav_nr_xz' : ''" @click="navclick(2)">可使用(2)</view>
				<view class="nav_nr" :class="nav_id == 1 ? 'nav_nr_xz' : ''" @click="navclick(1)">不可用(3)</view>
			</view> -->
			<view
				:class="`list list_2`"
				v-for="(item, index) in list"
				:key="index"
				@click="list_click(item.id, item.actual_price)">
				<view class="list_top">
					<view class="list_top_left">
						<view class="list_top_left_title">{{ item.title }}</view>
						<view class="list_top_left_text">满{{ item.virtual_price }}元可用</view>
					</view>
					<view class="list_top_right">
						{{ item.actual_price }}
						<span class="span">元</span>
					</view>
				</view>
				<view class="list_btn">
					<view class="list_btn_zw zw1"></view>
					<view class="list_btn_zw zw2"></view>
					<view class="list_btn_left">有效期至{{ item.end_time }}</view>
					<view class="list_btn_right list_btn_right_xz" v-if="list_id == item.id">已选中</view>
					<view class="list_btn_right list_btn_right_wxz" v-if="list_id != item.id">未选中</view>
					<!-- <view class="list_btn_right" v-if="nav_id == 2">不可用</view> -->
				</view>
			</view>
		</view>
		<view class="no_list" v-if="list != null && list.length < 1">
			<image class="no_list_img" src="/static/no_list.png" mode=""></image>
		</view>
		<view class="btn" v-if="type == 2">
			<view class="btn_box">
				<view class="btn_box_right" @click="submit">确认</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	let count = ref({ not_use: 0, used: 0, out_time: 0 })
	let list = ref(null)
	let type = ref(1)
	let nav_id = ref(2)
	let list_id = ref(null)
	let list_price = ref(null)

	let price = ref(0)

	const navclick = (id) => {
		nav_id.value = id
		list.value = null
		indexlist()
	}
	const list_click = (id, item) => {
		list_id.value = id
		list_price.value = item
	}
	const submit = () => {
		cityStore.yh_id = list_id.value
		cityStore.yh = list_price.value
		uni.navigateBack()
	}
	const indexlist = () => {
		if (type.value == 1) {
			indexlist1()
		} else {
			indexlist2()
		}
	}
	const indexlist1 = async () => {
		await http.post('/srapi/wode/my_coupon', { type: nav_id.value }).then((res) => {
			console.log('返回值', res)
			count.value = res.count
			list.value = res.data
		})
	}
	const indexlist2 = async () => {
		await http.post('/srapi/wode/youhuiquan', { price: price.value }).then((res) => {
			console.log('返回值', res)
			list.value = res.data
		})
	}

	onShow(() => {
		console.log('页面刷新')
	})
	onLoad((option) => {
		console.log('接收传参:', option)
		type.value = option.type
		if (type.value == 2) {
			price.value = option.price
			list_id.value = cityStore.yh_id
			list_price.value = cityStore.yh
		}

		indexlist()
	})
	const to_index = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
</script>

<style>
	page {
		background-color: #f1f3f2;
	}
</style>

<style lang="less" scoped>
	.nav {
		position: sticky;
		width: 750rpx;
		box-sizing: border-box;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 80rpx;
		z-index: 15;
		background: #ffffff;
		.nav_nr {
			font-size: 28rpx;
			font-weight: 500;
			color: #787878;
		}
		.nav_nr_xz {
			position: relative;
			display: block;
			z-index: 1;
			color: #010101;
		}

		.nav_nr_xz::after {
			content: '';
			position: absolute;
			left: -2rpx;
			bottom: 5rpx;
			z-index: -1;
			width: 118rpx;
			height: 8rpx;

			background: linear-gradient(to right, #2468fb, rgba(36, 104, 251, 0));
			border-radius: 4rpx;
		}
	}
	.nav2 {
		padding: 30rpx 180rpx;
	}

	.con {
		padding: 30rpx 20rpx;
	}
	.list {
		background: #ffffff;
		border-radius: 24rpx;
		margin-bottom: 15rpx;
		.list_top {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.list_top_left {
				.list_top_left_title {
					font-size: 28rpx;
					font-weight: 700;
					color: #000000;
					margin-bottom: 22rpx;
				}
				.list_top_left_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #ff4848;
				}
			}
			.list_top_right {
				font-size: 72rpx;
				font-weight: 500;
				color: #ff4848;
				.span {
					font-size: 20rpx;
					font-weight: 500;
					color: #ff4848;
				}
			}
		}
		.list_btn {
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 20rpx;
			font-weight: 500;
			color: #ffffff;
			position: relative;
			border-top: 1px dashed #dddddd;
			.list_btn_zw {
				width: 30rpx;
				height: 30rpx;
				background-color: #f1f3f2;
				border-radius: 50%;
				position: absolute;
				top: -18rpx;
			}
			.zw1 {
				left: -15rpx;
			}
			.zw2 {
				right: -15rpx;
			}
			.list_btn_left {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
			}
			.list_btn_right {
				width: 121rpx;
				height: 48rpx;
				background: #2468fb;
				border-radius: 24rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20rpx;
				font-weight: 500;
				color: #ffffff;
				.list_btn_right_img {
					width: 7rpx;
					height: 12rpx;
					margin-left: 12rpx;
				}
			}
			.list_btn_right_xz {
				background: #2468fb;
				color: #ffffff;
			}
			.list_btn_right_wxz {
				background: #f1f3f2 !important;
				color: #787878 !important;
			}
		}
	}

	.list_2 {
		.list_top {
			.list_top_left {
				.list_top_left_title {
					color: #000000;
				}
				.list_top_left_text {
					color: #ff4848;
				}
			}
			.list_top_right {
				color: #ff4848;
				.span {
					color: #ff4848;
				}
			}
		}
		.list_btn {
			.list_btn_left {
				color: #787878;
			}
			.list_btn_right {
				background: #2468fb;
				color: #ffffff;
			}
		}
	}
	.list_1 {
		.list_btn {
			.list_btn_left {
				color: #787878;
			}
			.list_btn_right {
				background: #f1f3f2;
				color: #787878;
			}
		}
	}
	.list_3 {
		.list_top {
			.list_top_left {
				.list_top_left_title {
					color: #cbcbcb;
				}
				.list_top_left_text {
					color: #cbcbcb;
				}
			}
			.list_top_right {
				color: #cbcbcb;
				.span {
					color: #cbcbcb;
				}
			}
		}
		.list_btn {
			.list_btn_left {
				color: #cbcbcb;
			}
			.list_btn_right {
				background: #f1f3f2;
				color: #787878;
			}
		}
	}
	.btn {
		margin-top: 60rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx ;
			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				width: 223rpx;
				height: 78rpx;
				background: #ffffff;
				border: 2rpx solid #2468fb;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				color: #2468fb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 21rpx;
				.btn_box_left_img {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
			.btn_box_right {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #2468fb;
				border: 2rpx solid #2468fb;
				height: 78rpx;
				border-radius: 39rpx;
				flex: 1;
				font-size: 28rpx;
				font-weight: 700;
				color: #ffffff;
			}
		}
	}
	//
</style>
